<template>
    <div>
        <button @click="changeData">修改</button>
    </div>
</template>

<script>
    import { ref, reactive, watch } from 'vue';

    export default {
        setup() {
            const info = reactive({
                name: 'leon',
                age: 18,
                friend: {
                    name: 'kobe'
                }
            })
            
            // 直接写info是可以深度侦听的 想拿到普通对象的写法 默认不可以深度侦听
            watch(() => ({...info}), (newInfo, oldInfo) => {
                console.log(newInfo, oldInfo);
            }, {
                deep: true,
                immediate: true
            })

            const changeData = () => {
                info.friend.name = 'james';
            }

            return {
                changeData,
                info
            }
        }
    }
</script>

<style scoped>

</style>